<template>
  <div class="container">
    <!-- 头部 -->
    <header>
      <h1 @click="fullScreen">智慧社区数据分析平台</h1>
      <div class="show-time">{{ timeStr }}</div>
    </header>
    <!-- 页面主体 -->
    <section class="mainbox">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel bar">
          <h2>智慧社区预约服务</h2>
          <!-- 图表放置盒子 -->
          <div class="chart"></div>
          <!-- 伪元素绘制盒子下边角 -->
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <h2>社区年龄分布</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
       <div class="panel bar2 progressBar">
         <h2>社区人数分布</h2>
         <div class="chart"></div>
         <div class="panel-footer"></div>
       </div>
        <!-- <div class="panel line">-->
        <!--   <h2>折线图-人员变化-->
        <!--     <a class="a-active" href="javascript:">2020</a>-->
        <!--     <a href="javascript:">2021</a>-->
        <!--   </h2>-->
        <!--   <div class="chart"></div>-->
        <!--   <div class="panel-footer"></div>-->
        <!-- </div>-->
      </div>
      <!-- 中间盒子 -->
      <div class="column">
        <!-- 头部 no模块 -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>{{ deptNums }}</li>
              <li>{{ personNums }}</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>智慧社区</li>
              <li>服务人员</li>
            </ul>
          </div>
        </div>
        <!-- map模块 -->
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart" id="map-container"></div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="column">
        <!-- <div class="panel bar2">-->
        <!--   <h2>柱形图-就业行业</h2>-->
        <!--   <div class="chart"></div>-->
        <!--   <div class="panel-footer"></div>-->
        <!-- </div>-->
        <!-- <div class="panel line2">-->
        <!--   <h2>折线图-播放量</h2>-->
        <!--   <div class="chart"></div>-->
        <!--   <div class="panel-footer"></div>-->
        <!-- </div>-->
        <!-- <div class="panel pie2">-->
        <!--   <h2>饼形图-地区分布</h2>-->
        <!--   <div class="chart"></div>-->
        <!--   <div class="panel-footer"></div>-->
        <!-- </div>-->
        <div class="panel listGroup">
          <div class="tb-header">
            <span class="tableList_content_list_pro">序号</span>
            <span class="tableList_content_list_pro">姓名</span>
            <span class="tableList_content_list_pro">记录时间</span>
            <span class="tableList_content_list_pro">收缩压</span>
            <span class="tableList_content_list_pro">舒张压</span>
            <span class="tableList_content_list_pro">心率</span>
            <span class="tableList_content_list_pro">体温</span>
            <span class="tableList_content_list_pro">健康状态</span>
          </div>
          <vueSeamlessScroll v-if="listData.length" :data="listData" class="seamless-warp" :class-option="classOption">
            <div class="list">
              <ul>
                <li v-for="(item,index) in listData" :key="index">
                  <span class="tableList_content_list_pro">{{ item.id }}</span>
                  <span class="tableList_content_list_pro">{{ item.userName }}</span>
                  <span class="tableList_content_list_pro">{{ item.recordDate }}</span>
                  <span class="tableList_content_list_pro">{{ item.bloodPressureSystolic }}</span>
                  <span class="tableList_content_list_pro">{{ item.bloodPressureDiastolic }}</span>
                  <span class="tableList_content_list_pro">{{ item.heartRate }}</span>
                  <span class="tableList_content_list_pro">{{ item.bodyTemperature }}</span>
                  <span class="tableList_content_list_pro" :style="{color: item.status === '正常' ? '#00b0ff' : '#ff0000'}">{{ item.status }}</span>
                </li>
              </ul>
            </div>
          </vueSeamlessScroll>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import flexible from '@/assets/flexible/flexible.js'
import screenfull from 'screenfull'
import vueSeamlessScroll from "vue-seamless-scroll";
import {getPieChartData,getProgressBarChartData, getChartPointData, getBarChartData,getChartNums,getPieChartListData} from '@/api/home/chart'

let map = {};
export default {
  // 定义组件
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      timeStr: '',
      listData: [],
      barXData: [],
      barData: [],
      progressBarYData: [],
      progressBarData: [],
      progressBarPercentageData: [],
      pieData: [],
      mapPoints: [],
      deptNums:'',
      personNums:''
    };
  },
  computed: {
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    this.getTimes();
  },
  mounted() {
    this.getData()

  },
  beforeDestroy() {
  },
  methods: {
    // 全屏
    fullScreen() {
      const element = document.getElementsByClassName('container')[0];
      screenfull.toggle(element);
    },
    getTimes() {
      setInterval(this.handleHeaderTime, 1000);
    },
    handleHeaderTime() {
      let that = this;
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      let hours = new Date().getHours(); //获取当前时间的小时
      let minutes = new Date().getMinutes(); //获取当前时间的分数
      let seconds = new Date().getSeconds(); //获取当前时间的秒数
      //当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      //拼接格式化当前时间
      that.timeStr = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    chart1() {
      // 1.实例化对象
      let myChart = this.$echarts.init(document.querySelector(".bar .chart"));
      // 2.指定配置项和数据
      let option = {
        color: ['#2f89cf'],
        // 提示框组件
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 修改图表位置大小
        grid: {
          left: '0%',
          top: '10px',
          right: '0%',
          bottom: '4%',
          containLabel: true
        },
        // x轴相关配置
        xAxis: [{
          type: 'category',
          data: this.barXData,
          axisTick: {
            alignWithLabel: true
          },
          // 修改刻度标签，相关样式
          axisLabel: {
            color: "rgba(255,255,255,0.8)",
            fontSize: 10
          },
          // x轴样式不显示
          axisLine: {
            show: false
          }
        }],
        // y轴相关配置
        yAxis: [{
          type: 'value',
          // 修改刻度标签，相关样式
          axisLabel: {
            color: "rgba(255,255,255,0.6)",
            fontSize: 12
          },
          // y轴样式修改
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.6)",
              width: 2
            }
          },
          // y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)"
            }
          }
        }],
        // 系列列表配置
        series: [{
          name: '直接访问',
          type: 'bar',
          barWidth: '35%',
          // ajax传动态数据
          data: this.barData,
          itemStyle: {
            // 修改柱子圆角
            barBorderRadius: 5
          }
        }]
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);

      // 4.让图表随屏幕自适应
      window.addEventListener('resize', function () {
        myChart.resize();
      })
    },
    chart2() {
      // 1.实例化对象
      let myChart = this.$echarts.init(document.querySelector(".progressBar .chart"));

      // 声明颜色数组
      let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      // 2.指定配置项和数据
      let option = {
        grid: {
          top: "10%",
          left: '22%',
          bottom: '10%',
          // containLabel: true
        },
        xAxis: {
          // 不显示x轴相关信息
          show: false
        },
        yAxis: [{
          type: 'category',
          // y轴数据反转，与数组的顺序一致
          inverse: true,
          // 不显示y轴线和刻度
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // 将刻度标签文字设置为白色
          axisLabel: {
            color: "#fff"
          },
          data: this.progressBarYData
        }, {
          // y轴数据反转，与数组的顺序一致
          inverse: true,
          show: true,
          // 不显示y轴线和刻度
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // 将刻度标签文字设置为白色
          axisLabel: {
            color: "#fff"
          },
          data: this.progressBarData
        }],
        series: [{
          // 第一组柱子（条状）
          name: '条',
          type: 'bar',
          // 柱子之间的距离
          barCategoryGap: 50,
          // 柱子的宽度
          barWidth: 10,
          // 层级 相当于z-index
          yAxisIndex: 0,
          // 柱子更改样式
          itemStyle: {
            barBorderRadius: 20,
            // 此时的color可以修改柱子的颜色
            color: function (params) {
              // params 传进来的是柱子的对象
              // dataIndex 是当前柱子的索引号
              // console.log(params);
              return myColor[params.dataIndex];
            }
          },
          data: this.progressBarPercentageData,
          // 显示柱子内的百分比文字
          label: {
            show: true,
            position: "inside",
            // {c} 会自动解析为数据（data内的数据）
            formatter: "{c}%"
          }
        },
          {
            // 第二组柱子（框状 border）
            name: '框',
            type: 'bar',
            // 柱子之间的距离
            barCategoryGap: 50,
            // 柱子的宽度
            barWidth: 14,
            // 层级 相当于z-index
            yAxisIndex: 1,
            // 柱子修改样式
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 2,
              barBorderRadius: 15,
            },
            data: [100, 100, 100, 100, 100]
          }
        ]
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);

      // 4.让图表随屏幕自适应
      window.addEventListener('resize', function () {
        myChart.resize();
      })
    },
    chart3() {
      // 年份对应数据
      let yearData = [{
        year: "2020", // 年份
        data: [
          // 两个数组是因为有两条线
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ]
      },
        {
          year: "2021", // 年份
          data: [
            // 两个数组是因为有两条线
            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
            [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          ]
        }
      ];

      let myChart = this.$echarts.init(document.querySelector(".line .chart"));

      let option = {
        // 修改两条线的颜色
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
          trigger: 'axis'
        },
        // 图例组件
        legend: {
          // 当serise 有name值时， legend 不需要写data
          // 修改图例组件文字颜色
          textStyle: {
            color: '#4c9bfd'
          },
          right: '10%',
        },
        grid: {
          top: "20%",
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          show: true, // 显示边框
          borderColor: '#012f4a' // 边框颜色
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 去除轴间距
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          // 去除刻度线
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#4c9bfb" // x轴文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: 'value',
          // 去除刻度线
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#4c9bfb" // x轴文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a"
            }
          }
        },
        series: [{
          type: 'line',
          smooth: true, // 圆滑的线
          name: '新增粉丝',
          data: yearData[0].data[0]
        },
          {
            type: 'line',
            smooth: true, // 圆滑的线
            name: '新增游客',
            data: yearData[0].data[1]
          }
        ]
      };

      myChart.setOption(option);

      // 4.让图表随屏幕自适应
      window.addEventListener('resize', function () {
        myChart.resize();
      })

      // 5.点击切换2020 和 2021 的数据
      // $('.line h2 a').on('click', function () {
      //   // console.log($(this).index());
      //   // 点击a 之后 根据当前a的索引号 找到对应的 yearData 相关对象
      //   // console.log(yearData[$(this).index()]);
      //   let obj = yearData[$(this).index()];
      //   option.series[0].data = obj.data[0];
      //   option.series[1].data = obj.data[1];
      //   // 选中年份高亮
      //   $('.line h2 a').removeClass('a-active');
      //   $(this).addClass('a-active');
      //
      //   // 需要重新渲染
      //   myChart.setOption(option);
      // })
    },
    chart4() {
      let myChart = this.$echarts.init(document.querySelector('.line2 .chart'));

      let option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          top: "0%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
        },
        grid: {
          top: '30',
          left: '10',
          right: '30',
          bottom: '10',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12
            }
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)"
            }
          },
          data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"]
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            // 不显示刻度线
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12
            }
          },
          // 修改分割线的颜色
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          }
        }],
        series: [{
          name: '邮件营销',
          type: 'line',
          smooth: true, // 圆滑的线
          // 单独修改当前线条的样式
          lineStyle: {
            color: "#0184d5",
            width: 2
          },
          // 填充区域渐变透明颜色
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [{
                offset: 0,
                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
              },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          },
          // 拐点设置为小圆点
          symbol: 'circle',
          // 设置拐点大小
          symbolSize: 5,
          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          // 设置拐点颜色以及边框
          itemStyle: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
          },
          data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40]
        },
          {
            name: "转发量",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: "rgba(0, 216, 135, 0.4)"
                  },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20]
          }
        ]
      };

      myChart.setOption(option);

      window.addEventListener('resize', function () {
        myChart.resize();
      })
    },
    chart5() {
      let myChart = this.$echarts.init(document.querySelector(".pie .chart"));
      let option = {
        color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          // 垂直居中,默认水平居中
          // orient: 'vertical',

          bottom: 0,
          left: 10,
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "10"
          }
        },
        series: [{
          name: '年龄分布',
          type: 'pie',
          // 设置饼形图在容器中的位置
          center: ["50%", "42%"],
          // 修改饼形图大小，第一个为内圆半径，第二个为外圆半径
          radius: ['40%', '60%'],
          avoidLabelOverlap: false,
          // 图形上的文字
          label: {
            show: false,
            position: 'center'
          },
          // 链接文字和图形的线
          labelLine: {
            show: false
          },
          data: [{
            value: 1,
            name: "0岁以上"
          },
            {
              value: 4,
              name: "20-29岁"
            },
            {
              value: 2,
              name: "30-39岁"
            },
            {
              value: 2,
              name: "40-49岁"
            },
            {
              value: 1,
              name: "50岁以上"
            }
          ]
        }]
      };

      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      })
    },
    chart6() {
      let myChart = this.$echarts.init(document.querySelector('.pie .chart'));
      let option = {
        color: ['#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: 10
          }
        },
        series: [{
          name: '地区分布',
          type: 'pie',
          radius: ["10%", "60%"],
          center: ['50%', '40%'],
          // 半径模式  area面积模式
          roseType: 'radius',
          // 图形的文字标签
          label: {
            fontsize: 10
          },
          // 引导线调整
          labelLine: {
            // 连接扇形图线长(斜线)
            length: 6,
            // 连接文字线长(横线)
            length2: 8
          },
          data: this.pieData
        }]
      };

      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      })
    },
    map() {
      map = new AMap.Map('map-container', {
        zoom: 13,	//设置地图的缩放级别
        zooms: [8, 40],	//设置地图的缩放级别区间
        center: this.mapPoints[0].position,	//设置地图中心点坐标
        mapStyle: 'amap://styles/darkblue',		//设置地图的显示样式，更改darkblue为你想要的样式
        features: ['road', 'point']	//设置地图的底图元素，缺少则显示全部元素，bg区域面、point兴趣点、road道路及道路标注、building建筑物
      });

      let iconObj =  new AMap.Icon({
        size: new AMap.Size(27, 30),    // 图标尺寸
        image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',  // 自定义图像的url
        imageSize: new AMap.Size(25.5, 35)   // 根据所设置的大小拉伸或压缩图片
      })

      this.mapPoints.map((item) => {

        let marker = new AMap.Marker({
          position: item.position,
          title: item.title,
          icon: iconObj
        });

        map.add(marker)

        marker.setMap(map);

        //设置鼠标划过点标记显示的文字提示
        marker.setTitle("设置位置");
        marker.setLabel({
          offset: new AMap.Pixel(15, 15),
          content: item.title
        });

      })
      // // 创建一个 Marker 实例：
      // const marker = new AMap.Marker({
      //   position: [111.748814, 40.842127],   // 经纬度
      //   //创建一个自定义图标实例
      //   icon: new AMap.Icon({
      //     size: new AMap.Size(27, 30),    // 图标尺寸
      //     image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',  // 自定义图像的url
      //     imageSize: new AMap.Size(25.5, 35)   // 根据所设置的大小拉伸或压缩图片
      //   }),
      // });
      // //将点标记添加至地图
      // map.add(marker)
    },
    getData() {
      // 获取柱状图数据
      getBarChartData().then((res)=>{
        this.barXData = res.serveType
        this.barData = res.nums
        this.chart1()
      })
      // 获取进度条柱状图
      getProgressBarChartData().then((res)=>{
        console.log(res,123123)
        this.progressBarYData = res.depts
        this.progressBarData = res.nums
        this.progressBarPercentageData = res.percentage
        this.chart2()
      })
      // 获取饼状图数据
      getPieChartData().then((res)=>{
        for (let i = 0; i < res.nums.length; i++) {
          this.pieData.push({
            value: res.nums[i],
            name: res.age[i]
          })
        }
        this.chart6()
      })
      // 获取标题下的数字
      getChartNums().then((res)=>{
        this.deptNums = res.deptNums
        this.personNums = res.personNums
      })
      // 获取列表
      getPieChartListData().then((res)=>{
        this.listData = res
      })
      // 地图
      getChartPointData().then((res)=>{
        res.data.map((item)=> {
          this.mapPoints.push({
            position: [item.longitude, item.latitude],   // 经纬度
            title: item.deptName,
            label: {
              content: "123123",
              direction: 'top' //文本标注方位 可选值：'top'|'right'|'bottom'|'left'|'center'，默认值: 'right'
            }
          })
        })

        setTimeout(() => {
          this.map()
        }, 100)
      })
    }
  },
}
</script>
<style lang="scss" scoped>

// css 初始化
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  // overflow: hidden;
}

li {
  list-style: none;
}

// 声明字体
@font-face {
  font-family: electronicFont;
  src: url(../assets/font/DS-DIGIT.TTF);
}


.container {
  background: url(../assets/images/bg.jpg) no-repeat top center;
  line-height: 1.15;
  //height: calc(100vh - 84px);
  height: 100vh;
}

header {
  position: relative;
  height: 1.25rem;
  background: url(../assets/images/head_bg.png) no-repeat;
  background-size: 100% 100%;

  h1 {
    font-size: .475rem;
    color: rgba(255, 255, 255, 0.87);
    text-align: center;
    line-height: 1rem;
  }

  .show-time {
    position: absolute;
    top: 0;
    right: .375rem;
    line-height: .9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: .25rem;
  }
}

// 页面主体盒子
.mainbox {
  display: flex;
  min-width: 1024px;
  max-height: 100%;
  margin: 0 auto;
  padding: .125rem .125rem 0;

  .column {
    flex: 3;
  }

  .column:nth-child(2) {
    flex: 5;
    margin: 0 .125rem .1875rem;
    // 图片旋转有时会超出屏幕最大位置导致滚动条自动上下移动
    overflow: hidden;
  }

  .panel {
    position: relative;
    height: 3.875rem;
    padding: 0 .1875rem .5rem;
    margin-bottom: .1875rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: url(../assets/images/line.png) rgba(255, 255, 255, 0.03);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: '';
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: '';
    }

    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;

      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: '';
      }

      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: '';
      }
    }

    h2 {
      height: .6rem;
      color: #fff;
      line-height: .6rem;
      text-align: center;
      font-size: 0.25rem;
      font-weight: 400;

      a {
        color: rgb(167, 167, 167);
        text-decoration: none;
        margin: 0 .125rem;
      }

      .a-active {
        color: #fff;
      }
    }

    .chart {
      height: 3rem;
    }
  }
}

// no数字模块
.no {
  background-color: rgba(101, 132, 226, 0.1);
  padding: .1875rem;

  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: .375rem;
      height: .125rem;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      content: '';
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      width: .375rem;
      height: .125rem;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      content: '';
    }

    ul {
      display: flex;

      li {
        position: relative;
        flex: 1;
        line-height: 1rem;
        font-size: .875rem;
        color: #ffeb7b;
        text-align: center;
        font-family: electronicFont;

        &:first-child::after {
          content: '';
          position: absolute;
          top: 25%;
          right: 0;
          height: 50%;
          width: 1px;
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }

  .no-bd {
    ul {
      display: flex;

      li {
        flex: 1;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: .225rem;
        height: .5rem;
        line-height: .5rem;
        padding-top: .125rem;
      }
    }
  }
}

.map {
  position: relative;
  height: 10.125rem;

  .map1 {
    width: 6.475rem;
    height: 6.475rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../assets/images/map.png);
    background-size: 100% 100%;
    opacity: 0.3;
  }

  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.0375rem;
    height: 8.0375rem;
    background: url(../assets/images/lbx.png);
    background-size: 100% 100%;
    animation: rotate1 15s linear infinite;
    opacity: .6;
  }

  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.075rem;
    height: 7.075rem;
    background: url(../assets/images/jt.png);
    background-size: 100% 100%;
    animation: rotate2 15s linear infinite;
  }

  .chart {
    position: absolute;
    top: 0;
    left: 0;
    height: 10.125rem;
    width: 100%;
  }

  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes rotate2 {
    from {
      transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(0deg);
    }
  }
}

.column:nth-child(3) {
  .listGroup {
    height: calc(100% - 1.38rem);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);

    .tb-header {
      display: flex;
      justify-content: space-between;
      padding: .125rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      font-size: .15rem;

      span {
        flex: 1;
        text-align: center;
      }
    }

    .seamless-warp {
      overflow: hidden;
    }

    .list {
      height: 100%;
      overflow-y: auto;
      //padding: 0.125rem;
      border-top: none;

      li {
        display: flex;
        justify-content: space-between;
        padding: .125rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        font-size: .15rem;
        height: 60px;
        align-items: center;

        span {
          flex: 1;
          text-align: center;
        }
      }
    }
  }
}

/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

</style>
